<template>
  <div class="login">
    这里是登录页面

    <!-- <a-button type="primary" lo>这里是一个按钮</a-button>
    <a-table data-source="">jkljkl</a-table>
    <Button>jkljlk</Button> -->
    <a-form>
      <a-form-item name="account" label="用户名">
        <a-input v-model:value="passData.account" placeholder="请输入用户名"></a-input>
      </a-form-item>
      <a-form-item name="password" label="密码">
        <a-input v-model:value="passData.password" type="password" placeholder="请输入密码"></a-input>
      </a-form-item>
      <a-form-item>
        <a-button type="primary" @click="loginFn">登录</a-button>
      </a-form-item>
    </a-form>
    <a-select
      v-model:value="value"
      style="width: 120px"
      :options="[
        { label: '禁用', value: 1 },
        { label: '启用', value: 2 },
      ]"
      :placement="placement"
    >
    </a-select>
    <div class="wrapper">
      <div class="title active">title{{ nowChoose }}</div>
      <div
        v-for="item in 10"
        :key="item"
        :class="{ childItem: true, active: item === nowChoose }"
        @click="() => handleClick(item)"
      >
        {{ item }}
      </div>
    </div>
  </div>
  {{ tt }}
  <div @click="handlet">di</div>
</template>

<script setup>
import UserApi from '@/api/user';
const passData = ref({
  account: '',
  password: '',
});
const nowChoose = ref(null);
const handleClick = (item) => {
  nowChoose.value = item;
};

const loginFn = async () => {
  // try {
  //   const res = await UserApi.login(passData.value);
  //   console.log(res.data.data);
  //   const { token } = res.data.data;
  //   localStorage.setItem('token', token);
  //   // console.log(res);
  // } catch (e) {
  //   console.log(e);
  // }
  console.log(passData.value);

  const res = await UserApi.login(passData.value);
  debugger;
  console.log(res.data.data);
  const { token } = res.data.data;
  localStorage.setItem('token', token);
};
const name = ref('');
const tt = [{ name: name }];

const handlet = () => {
  // tt.value[0].name = 2;
  name.value = 2;
};
</script>

<style scoped lang="less">
.login {
  height: 100%;
}

.wrapper {
  display: flex;
  justify-content: space-around;

  .title {
    color: blue;

    &.active {
      color: red;
    }
  }

  .childItem {
    color: black;
    cursor: pointer;

    &.active {
      color: red;
    }
  }
}
</style>
